<template>
	<view class="list-logistics-cn position-relative">
		<!-- 组件内容 -->
		<view class="cn-content">
			
			<view class="padding-lr-20 padding-top-30 padding-bottom-15 radius-10 bg-ff">
				
				<!-- 收货地址 -->
				<view class="position-relative flex align-start">
					<!-- 竖向分割线 -->
					<view class="cut-line"></view>
					
					<!-- 详细地址 -->
					<view class="flex-one margin-left-40 padding-left-40 padding-bottom-30">
						<view class="label-active text-center">
							<text class="line-40 text-20 text-bold text-ff">收</text>
						</view>
						<view class="line-40 text-28 text-33">
							[收货地址]{{address.province ? address.province : ''}}{{address.city ? address.city : ''}}{{address.area ? address.area : ''}}{{address.address ? address.address : ''}}
						</view>
						<view class="line-height-40"></view>
					</view>
				</view>
				
				<!-- 物流轨迹 -->
				<view class="position-relative flex align-start" v-for="(item,index) in list" :key="index">
					<!-- 竖向分割线 最后一个不显示-->
					<view class="cut-line" v-if="index != list.length - 1"></view>
					<!-- 物流描述 -->
					<view class="flex-one margin-left-40 padding-left-40 padding-bottom-30">
						<view class="label-active text-center" v-if="index == 0 && status == 3">
							<text class="tyIcon-check line-40 text-30 text-ff"></text>
						</view>
						<view class="label" v-else>
							
						</view>
						
						<!-- <view :class="index == 0 && status == 3 ? 'sign_active text-center line-height-40' : 'sign'">
							<text class="tyIcon-check text-36 text-ff" v-if="index == 0 && status == 3"></text>
						</view> -->
						<view class="line-40 text-28" :class="index == 0 && status == 3 ? 'text-33' : 'text-77'">{{item.content}}</view>
						<view class="line-height-40 text-24 text-aa">{{item.accept_date}} {{item.accept_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 组件浮层 -->
		<view class="cn-layer"></view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		props: {
			// 物流明细
			list: {
				type: Array,
				default: res => []
			},
			// 物流状态 2--运输中 3--已签收 4--问题件
			status: { 
				type: [Number, String],
				default: 0
			},
			// 收货地址
			address: {
				type: Object,
				default: res => {}
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	/* 竖线 */
	.cut-line {
		position: absolute;
		left: 39rpx;
		top: 20rpx;
		/* width: 100%; */
		height: 100%;
		width: 2rpx;
		background: #ededed;
		/* border-left: 2rpx solid #ededed; */
		z-index: 1;
	}

	/* 主色标识 */
	.label-active {
		position: absolute;
		left: 20rpx;
		top: 0rpx;
		z-index: 10;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: var(--main);
	}
	
	/* 灰色标识 */
	.label {
		position: absolute;
		left: 30rpx;
		top: 10rpx;
		z-index: 10;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #ccc;
	}
</style>